<template>
    <div>

        <ul class="left">
            <li v-for="(item, index) in tab" :key="item.name" @click="goson(item.foods)" :id="index">{{ item.name }}</li>
        </ul>
        <div class="right">
            <router-view></router-view>
        </div>
        
    </div>
</template>

<script>
import axios from "axios";
export default {
    data() {
        return {
            tab: [],
        }
    },
    created() {
        this.getData();
    },
    methods: {
        async getData() {
            const data = await axios.get("http://localhost:3006/goods");
            this.tab = data.data.data[0].goods;
            console.log(this.tab)
            console.log(data.data.data)
        },
        goson(foods) {
            // const food=JSON.stringify(foods);
            this.$router.push({
                path: "/goods/son",
                // query: {
                //     foods,
                // }
            })
        }
    }
}
</script>

<style  scoped>
.left {
    width: 21.333vw;
    font-size: 3.2vw;
    padding: 3.2vw;
    background-color: #f3f5f7;
    float: left;
    margin-top: 20vh;
}

.left li {
    height: 17vw;
    text-align: center;
    /* padding: 3.2vw; */
    /* position: absolute; */
    line-height: 17vw;
    border-bottom: 0.133vw solid gray;
   

}

.right { 
    margin-top: 20vh;
    flex: 1;

    float: left;
    overflow: hidden;
}

</style>